<template>
	<view >
		<view class="order" v-for="(item,index) in orderFrom" :key="index">
			<view class="lable">订单ID：{{item.orderNo}}</view>
			<view class="second">
				<text class="second__title">客资获取提高40%</text>
				<text class="second__price"><text class="sym">￥</text>{{item.orderPrice}}</text>
			</view>
			<view class="type">任务类型：<text class="value">{{'小红书私信'}}</text></view>
			<view class="type">任务要求：<text class="value">{{'关注、私信、笔记评论、头像点赞'}}</text></view>
			<view class="type">发送类容：
				<view class="content">
					<view class="textarea u-line-3">{{item.content}}</view>
					<!-- <view class="u-flex u-flex-end color-text" @click.stop="copy(item.content)">
						<i class="cuIcon cuIcon-copy"></i>
						<text class="m-l6">复制</text>
					</view> -->
				</view>
			</view>
			<button class="btn" :class="'btn__' + item.status">{{['接单','已完成'][item.status]}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		name:"order-cell",
		props:{
			orderFrom:{
				type:[Array],
				default:() => ([{orderNo:'1524978457852246',orderPrice:'38.5',status:'0',content:'宝宝您看的这款是咱们家的主打风格哈，您可以给小编发下你喜欢的类型，我们的客 服同学会给您看一些相似的拍摄风格，我们也能尽快为你匹配到最适合你的样式哈。'}])
			}
		},
		data() {
			return {
			};
		}
	}
</script>

<style lang="scss">
	.order {
		padding: 24rpx;
		background: #fff;
		border-radius: 16rpx;
		.lable {
			font-size: 26rpx;
			color: #666;
			line-height: 34rpx;
		}
		.second {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 24rpx 0 20rpx;
			&__title {
				font-weight: 600;
				font-size: 34rpx;
				color: #111;
			}
			&__price {
				font-size: 30rpx;
				color: #FA5151;
				font-weight: 600;
			}
			.sym {
				font-size: 24rpx;
			}
		}
		.type {
			font-size: 26rpx;
			color: #666;
			margin-bottom: 12rpx;
			.value {
				color: #333;
			}
		}
		.content {
			margin-top: 12rpx;
			padding: 20rpx;
			border: 2rpx solid #F0F1F5;
			border-radius: 8rpx;
			font-size: 26rpx;
			color: #333;
			line-height: 34rpx;
			.textarea {
				height: 102rpx;
				text-align: justify;
			}
		}
		.btn {
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 8rpx;
			color: #fff;
			font-size: 30rpx;
			font-weight: 600;
			&__0 {
				background: #3662EC;
			}
			&__1 {
				background: #00B578;
			}
		}
	}
</style>